<template>
  <!-- *********************模态框***************************** -->
  <div>
    <el-dialog
      :title="ceshi ? '新增人员' : '编辑人员'"
      :visible="visible"
      width="30%"
      @close="closeFn"
    >
      <el-form
        :model="ruleForm"
        :rules="formRules"
        ref="ruleForm"
        label-width="100px"
      >
        <!-- 表单区 -->
        <el-form-item label="人员名称:" prop="userName">
          <el-input
            style="width: 80%"
            v-model.trim="ruleForm.userName"
            placeholder="请输入"
            maxlength="5"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="角色:" prop="roleId">
          <el-select
            v-model.trim="ruleForm.roleId"
            placeholder="请选择"
            style="width: 80%"
            @focus="getservice"
          >
            <el-option
              v-for="item in getserviceList"
              :key="item.roleCode"
              :label="item.roleName"
              :value="item.roleId"
              @click="huoqu(item.roleId)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话:" prop="mobile">
          <el-input
            style="width: 80%"
            v-model.trim="ruleForm.mobile"
            placeholder="请输入"
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="负责区域" prop="regionName">
          <el-select
            style="width: 80%"
            @focus="getsearch"
            v-model.trim="ruleForm.regionId"
            placeholder="请选择"
            @change="huoqu2"
          >
            <el-option
              v-for="item in getsearchList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像:" prop="image">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-checkbox-group v-model="ruleForm.status">
            <el-checkbox label="是否启用"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!-- ********************** 确认框 ************************* -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="centerll">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getservice, getsearch, postservice, putservice } from '@/api/personnel'
export default {
  name: 'aa-va',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    ceshi: {
      type: Boolean,
      default: false
    },
    omitlist: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      ruleForm: {
        userName: '', // 用户名
        roleId: '', // 角色Id //获取角色列表
        mobile: '', // 手机号
        regionId: '', // 所属区域Id  获取区域列表
        regionName: '', // 所属区域名称
        status: false, // 启用状态
        image:
          'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' // 头像Url
      }, // 表单数据
      formRules: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ], // 用户名
        roleId: [
          { required: true, message: '角色Id不能为空', trigger: 'blur' }
        ], // 角色Id //获取角色列表
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ], // 手机号
        regionId: [
          { required: true, message: '所属区域Id不能为空', trigger: 'blur' }
        ], // 所属区域Id  获取区域列表
        regionName: [
          { required: true, message: '所属区域不能为空', trigger: 'blur' }
        ], // 所属区域名称
        status: [], // 启用状态
        image: [{ required: true, message: '头像不能为空', trigger: 'blur' }] // 头像Url
      }, // 验证规则
      getserviceList: [], // 获取角色列表
      getsearchList: [], // 获取区域列表
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  async created () {
    getservice()
    getsearch()
  },
  methods: {
    closeFn () {
      // 关闭模态框 清空表单
      this.$refs.ruleForm.resetFields()
      this.$emit('update:visible', false)
    },
    async centerll () {
      // 保存 添加
      try {
        if (this.ruleForm.id) {
          await putservice(this.ruleForm)
          this.$message.success('更新成功')
        } else {
          await postservice(this.ruleForm) // 新增
          this.$message.success('添加成功')
        }
      } catch (e) {
        console.log(e)
      }
      await this.$refs.ruleForm.resetFields() // 重置表单校验
      this.closeFn() // 关闭模态框
    },
    async getservice () {
      // 角色Id数据
      // console.log(getservice());
      this.getserviceList = await getservice()
    },
    async getsearch () {
      // 所属区域
      const { currentPageRecords: arr } = await getsearch()
      this.getsearchList.push(...arr)
    },
    huoqu (id) {
      // 传值角色Id
      this.ruleForm.roleId = id
    },
    huoqu2 (params) {
      // 所属区域名字信息获取
      const aww = this.getsearchList.filter((item) => item.id === params)
      this.ruleForm.regionName = aww[0].name
    },
    //  ------------------------------华丽的分割线-----------------------------------------
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      this.ruleForm.image = file.url
      console.log(file)
    }
  }
}
</script>

<style>
.el-dialog__footer {
  width: 100%;
  text-align: center;
}
</style>
